<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
	+ request.getServerName() + ":" + request.getServerPort()
	+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Mua~亲亲宠管理平台·宠物类别管理</title>
<link rel="stylesheet" href="css/style.css" />

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-table.min.css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/bootstrap-table.min.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script>
</head>

<body>
	<%@ include file="/WEB-INF/jsp/mgnt/mgntTop.jspf"%>
	<div class="container  col-sm-offset-1  col-sm-10">
		<div class="page-header">
			<h3>宠物类别管理</h3>
		</div>
		<div class="container  col-sm-offset-1  col-sm-10">
			<div id="toolbar">
				<button id="btn_add" type="button" class="btn btn-default"
					onclick="add()">
					<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
				</button>
				<div class="form-group">
					<label class="control-label">类别：</label> <label
						class="radio-inline"> <input type="radio" name="type"
						value="0" checked onclick="refresh()"> 不限 </label> <label
						class="radio-inline"> <input type="radio" name="type"
						value="1" onclick="refresh()"> 猫 </label> <label
						class="radio-inline"> <input type="radio" name="type"
						value="2" onclick="refresh()"> 狗 </label>
				</div>
			</div>
			<table id="varietyTable" class="table table-striped">

			</table>
		</div>
	</div>
	<script type="text/javascript">
		$('#varietyTable')
				.bootstrapTable(
						{
							url : 'pet/listVarietysByType.do',
							method : "post",
							contentType : "application/x-www-form-urlencoded",
							pagination : true, // 是否显示分页（*）
							sidePagination : "client", // 分页方式：client客户端分页，server服务端分页（*）
							pageNumber : 1, // 初始化加载第一页，默认第一页
							pageSize : 10, // 每页的记录行数（*）
							pageList : [ 5, 10, 25 ], // 可供选择的每页的行数（*）
							queryParams : function(params) {
								return {
									type : $(
											"#toolbar input[name='type']:checked ")
											.val()
								};
							},//请求服务器时所传的参数
							responseHandler : function(res) {
								return res.varietyList;
							},
							toolbar : "#toolbar",
							detailView : true,
							detailFormatter : function(index, row) {
								var html = '<div class="form-group">'
										+ '<label class="col-sm-3 control-label">详细描述：</label>'
										+ '<div class="textarea col-sm-9">'
										+ '<textarea class="form-control" rows="5" name="description" id="des'+row.id+'" >'
										+ row.description
										+ '</textarea></div><button class="btn btn-sm  btn-info pull-right" onclick="upadteDescription('
										+ row.id + ')">确认修改</button></div>';
								return html;
							},
							columns : [
									{
										title : '序号',
										field : 'no',
										align : 'center',
										valign : 'middle',
										formatter : function(value, row, index) {
											return index + 1;
										}
									},
									{
										title : '类别',
										field : 'type',
										align : 'center',
										valign : 'middle',
										formatter : function(value) {
											if (value == '1') {
												return "猫";
											} else if (value == '2') {
												return "狗";
											}
										}
									},
									{
										title : '品种',
										field : 'varietyName',
										align : 'center',
										valign : 'middle'
									},
									{
										title : '删除操作',
										align : 'center',
										formatter : function(value, row) {
											var deletebtn = '<button class="btn btn-sm  btn-info" onclick="deleteVariety('
													+ row.id + ')">删除</button>';
											return deletebtn;
										}
									} ]
						});
		function deleteVariety(id) {
			$.ajax({
				url : "manage/deleteVariety.do",
				type : "POST",
				data : {
					"id" : id
				},
				success : function(result) {
					if (result.msg == 'error') {
						$(".modal-body").html(result.errorMsg);
						$("#topModal").modal("show");
					} else if (result.msg == 'success') {
						$(".modal-body").html("删除成功");
						$("#topModal").modal("show");
						refresh();
					}
				}
			});
		}

		function refresh() {
			$('#varietyTable').bootstrapTable('refresh');
		}

		function upadteDescription(id) {
			$.ajax({
				url : "manage/updateVarietyDes.do",
				type : "POST",
				data : {
					"id" : id,
					"description" : $('#des' + id).val()
				},
				success : function(result) {
					if (result.msg == 'error') {
						$(".modal-body").html(result.errorMsg);
						$("#topModal").modal("show");
					} else if (result.msg == 'success') {
						$(".modal-body").html("修改成功");
						$("#topModal").modal("show");
						refresh();
					}
				}
			});
		}
		function add() {
			window.location.href = "manage/newVariety.do";
		}
	</script>
</body>
</html>
